/*
*作者---王婷
*
*/
<template>
    <div class= "nav">
      <div class='footer'>
        <ul>
          <li>
            <router-link to='/Taking' active-class="curr" :class="sData.admin.dispatchingType==3?'footer-nav1fa':'footer-nav1jie'">
              <!-- <img src="../../assets/footer/taking1.png" v-if = "!isTaking&&sData.admin.dispatchingType!=3">
              <img src="../../assets/footer/taking2.png" v-if = "isTaking&&sData.admin.dispatchingType!=3">
              <img src="../../assets/footer/fa1.png" v-if = "!isTaking&&sData.admin.dispatchingType==3">
              <img src="../../assets/footer/fa2.png" v-if = "isTaking&&sData.admin.dispatchingType==3"> -->
              <span class="footer-text" v-text="sData.admin.dispatchingType==3?'发货':'接单'"></span>
            </router-link>
          </li>
          <li>
            <router-link to='/Sending' v-if = 'sData.admin.dispatchingType!=3'  active-class="curr" :class="['footer-nav2']">
              <!-- <img src="../../assets/footer/sending1.png" v-if = "!isSending">
              <img src="../../assets/footer/sending2.png" v-if = "isSending"> -->
              <span class="footer-text">送单</span>
            </router-link>
          </li>
          <li>
            <router-link to='/My' active-class="curr":class="['footer-nav3']" >
              <!-- <img src="../../assets/footer/my1.png" v-if = "!isMy">
              <img src="../../assets/footer/my2.png" v-if = "isMy"> -->
              <span class="footer-text">我的</span>
            </router-link>
          </li>
          
        </ul> 
      </div>
    </div>
</template>
<script type="text/javascript">
  export default{
    data(){
      return{
         sData:{
            admin:{},
            list:[]
        },
        isTaking:true,
        isSending:false,
        isMy:false
      }
    },
    methods:{
    },
    created(){
      if(m$.localStrages.get('footerData')){
        this.sData = m$.localStrages.get('footerData')
      }else{
        this.getAjax('/order/remote/dispatchingForAdmin', {'currentPage':1},
        (res) => {
            if(res&&res.data){
              this.sData = res.data;
              m$.localStrages.set('footerData',res.data);
            }
        })
      }
    }
  }
</script>
<style scoped lang="less">
   .nav{
    width:100%;
    .footer{
      position: fixed;
      bottom: 0;
      z-index: 2;
      width:100%;
      background: #f9f8f9;
      ul{
        height:.98rem;
        font-size: .2rem;
        text-align: center;
        width:100%;
        display: -webkit-flex; /* Safari */
        display: flex;
      }
      li{
        list-style: none;
        float: left;
        flex:1;
        color: #9d9d9d;
        height:100%;
        a{
          height: inherit;
          position: relative;
          display: block;
          font-size: 0;
          background-size: auto 0.48rem;
          background-position: center 0.15rem;
          background-repeat: no-repeat;
          &.footer-nav1jie{
            background-image: url("../../assets/footer/taking1.png");
            &.footer-nav1jie.curr{
              background-image: url("../../assets/footer/taking2.png")  ;
            }
          }
          &.footer-nav1fa{
            background-image: url("../../assets/footer/fa1.png") ;
            &.footer-nav1fa.curr{
              background-image: url("../../assets/footer/fa2.png") ;
            }
          }
          &.footer-nav2{
            background-image: url("../../assets/footer/sending1.png") ;
            &.footer-nav2.curr{
              background-image: url("../../assets/footer/sending2.png") ;
            }
          }
          &.footer-nav3{
            background-image: url("../../assets/footer/my1.png") ;
            &.footer-nav3.curr{
              background-image: url("../../assets/footer/my2.png") ;
            }
          }
          .footer-text{
            position: absolute;
            bottom: 0rem;
            font-size: 0.22rem;
            left:0;
            right:0;
            margin: auto;
          }
        }
        
      }
      .curr{
        color: #000;
      }
    }
   }
</style>